<script>
export default {
  name:'registerPage'
}

</script>

<template>
  <div class="registerPage">
    <h2>注册</h2>

    <div class="form-group">
      <label for="username">昵称：</label>
      <input type="text" id="username" name="username" required placeholder="请输入">
    </div>
    <div class="form-group">
      <label for="password">密码：</label>
      <input type="password" id="password" name="password" required placeholder="请输入">
    </div>
    <div class="form-group">
      <label for="email">邮箱：</label>
      <input type="text" id="email" name="email" required placeholder="请输入">
    </div>

    <div class="form-sex">
      性别：
      <input type="radio" value="1" name="sex" checked/><span>男</span>
      <input type="radio" value="0" name="sex" /><span>女</span>
    </div>
    <div class="form-group">
      <button onclick="register()">提交</button>
    </div>
  </div>
</template>

<style scoped>

.container {
  width: 300px;
  margin: 0 auto;
  padding: 30px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: white;
}

h2 {
  text-align: center;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}

.form-group input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 3px;
  box-sizing: border-box;
}

.form-group button {
  background-color: #4CAF50;
  color: white;
  cursor: pointer;
  border-radius: 3px;
  border: skyblue;
  width: 100%;
  height: 30px;
}

.form-sex {
  display: flex;
  margin-bottom: 20px;
  /* justify-content: space-between; */

}

span {
  font-family: Arial, sans-serif;
}

</style>